//布局
.data-left01{
  height: 86vh;
}
.data-content-left01{
  height: 82vh;
}
.data-right01{
  height: 86vh;
}
.data-content-right01{
  height: 82vh;
}
.data-border{
  padding: 1.5vh 0.8vw ;
  width: calc(100% - 1.6vw);
  height: calc(100% - 3vh);
}

@img: '/static/img/view/hospital/energyStatistics';

//能耗统计 - 能耗资产信息
.titleBox{
  .WH(100%,5%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  p{
    .fontStyle(16px);
    color: rgba(255,255,255,0.8);
    text-shadow: 0px 0px 2px rgba(39,166,255,0.8);
    font-family: 400;
  }
  .separate{
    display: block;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, #4B78D9 0%, #4B78D9 21%, rgba(49,95,154,0) 100%);
    filter: blur(0.6px);
  }
}
.itemList{
  .WH(100%,30%);
  // background-color: aqua;
  display: flex;
  justify-content: space-around;
  li{
    .WH(30%,100%);
    i{
      .WH(100%,80%);
      display: block;
      background: url("@{img}/background.webp")  no-repeat;
      background-size: cover;
      .displayFlex();
      div{
        .WH(100%,90%);
      }
    }
  }
}
//能耗统计 - 能耗汇总
.energySumList{
  .WH(100%,27%);
  li{
    display: flex;
    .WH(100%,30%);
    margin: 1.5% 0;
    i{
      display: block;
      .WH(15%,100%);
      .backgroundImg('@{img}/1.webp',100%);
    }
    >ul{
      .WH(85%,100%);
      background: url('@{img}/buttom.webp') bottom  no-repeat;
      background-size: 100%;
      display: flex;
      align-items: start;
      justify-content: space-evenly;
      li{
        display: flex;
        flex-direction: column;
        .WH(30%,100%);
        h2{
          font-weight: 400;
          color: #A5D8FC;
          font-size: 18px;
        }
        p{
          font-size: 24px;
          font-weight: 400;
          color: #D9F1FD;
          line-height: 28px;
        }
        b{
          font-size: 12px;
          font-weight: 400;
          color: #E4F3FF;
          line-height: 14px;
        }
      }
    }
  }
  li:nth-child(2) i{
    .backgroundImg('@{img}/2.webp',100%);
  }
  li:nth-child(3) i{
    .backgroundImg('@{img}/3.webp',100%);
  }
}

//能耗统计 - 实时报警
.alarmPicture{
  .WH(100%,28%);
}

//能源统计 - 月分类能耗统计
.MonthEnergyPicture{
  .WH(100%,28%);
}

//能源统计 - 楼栋能耗统计
.floorEnergyStatistics{
  .WH(100%,30%);
  display: flex;
  justify-content: space-evenly;
  ul{
    .WH(45%);
    >div{
      .displayFlex();
      .WH(100%,10%);
      .backgroundImg('@{img}/title.webp');
      b{
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 14px;
        letter-spacing: 1px;
      }
    }
    li{
      .WH(100%,12%);
      display: flex;
      align-items: center;
      span{
        width: 20%;
        font-size: 12px;
        color: rgba(165, 163, 163, 0.8);
      }
      >div{
        .WH(60%,20%);
        background-color: #4B78D9;
        border-radius: 2px 2px 2px 2px;
      }
      b{
        width: 20%;
        font-size: 12px;
        color: rgba(165, 163, 163, 0.8);
      }
    }
  }
}

//能源统计 - 企业能耗排名
.enterpriseList{
  overflow: hidden;
  .WH(100%,27%);
  >li{
    .WH(100%,20%);
    display: flex;
    align-items: center;
    span{
      .displayFlex();
      .WH(15%,100%);
      font-size: 20px;
      font-weight: 500;
      color: #B0E0FF;
      line-height: 23px;
    }
    div{
      .WH(100%,90%);
      transform: skew(-15deg);
      margin-right: -15%;
      background: linear-gradient(180deg, rgba(124, 185, 245, 0.76) 0%, rgba(103,164,225,0.2) 100%);
      opacity: 0.7;
      display: flex;
      align-items: center;
      border-left: solid 3px #FFFFFF;
      border-image:radial-gradient(rgba(255,255,225,0.6), rgba(255,255,225,0)) 10;
      b{
        padding-left: 3%;
        width: 30%;
        transform: skew(15deg);
        color: #FFFFFF;
      }
      ul{
        .WH(50%,85%);
        transform: skew(15deg);
        display: flex;
        align-items: center;
        li{
          .WH(30%);
          padding:0 1.5%;
          i{
            .WH(1vw,1vw);
            display: block;
            .backgroundImg('@{img}/11.webp')
          }
          p{
            font-size: 12px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 14px;
          }
        }
        li:nth-child(2) i{
          .backgroundImg('@{img}/12.webp')
        }
        li:nth-child(3) i{
          .backgroundImg('@{img}/13.webp')
        }
      }
    }
  }
}
